<template>
  <view>
    <view :style="'--color:' + color + ';'" class="hid_top">
      <view :style="'background-image:url(' + bg + ');'" class="bg"></view>
      <image :src="D.path_s" class="logo" mode="aspectFill"></image>
      <text class="hid">工号：{{ id }}</text>
      <view class="truename">
        <text class="h2">{{ D.truename }}</text>
        <text v-if="!globalUtils.empty(D.agenttitle)" class="span">{{ D.agenttitle }}</text>
        <view class="title">{{ D.title }}</view>
      </view>
      <view class="myb">
        <view>
          <text class="b">{{ D.click }}</text>
          <text class="span">人气</text>
        </view>
        <view>
          <text class="b">{{ D.pj_good }}</text>
          <text class="span">好评</text>
        </view>
        <view>
          <text class="b">{{ D.pj_normal }}</text>
          <text class="span">中评</text>
        </view>
        <view>
          <text class="b">{{ D.pj_bad }}</text>
          <text class="span">差评</text>
        </view>
      </view>
    </view>
    <view :style="'--rgbcolor:' + rgbcolor + ';'" class="hn_i_box aboutus">
      <view class="h1">
        经纪人简介
        <text class="b"></text>
      </view>
      <rich-text :nodes="aboutus" class="C"></rich-text>
    </view>
    <view :style="'--color:' + color + ';--rgbcolor:' + rgbcolor + ';'" class="hn_i_box contact_box">
      <view class="h1">
        联系经纪人
        <text class="b"></text>
      </view>
      <view class="dl">
        <view class="dt">
          <view class="li" @tap="telFn">
            <text class="p ico telico"></text>
            热线
            <text class="span">{{ D.mob }}</text>
          </view>
          <view class="li">
            <text class="p ico wxico"></text>
            微信
            <text class="span">{{ D.weixin }}</text>
          </view>
          <view v-if="!globalUtils.empty(D.qq)" class="li">
            <text class="p ico qqico"></text>
            QQ < text class="span">{{ D.qq }}
          </view>
        </view>
        <view class="dd">
          <view class="hnewm">
            <image :showMenuByLongpress="true" :src="D.ewm" mode="aspectFill"></image>
            <text class="h6">长按加经纪人微信</text>
          </view>
        </view>
      </view>
    </view>
    <view id="bbsbox" :style="'--color:' + color + ';--rgbcolor:' + rgbcolor + ';'" class="hn_i_box">
      <view class="h1">
        服务评价
        <text class="b"></text>
        <view v-if="BBS.length > 0" class="btn" @tap="bbs_addFn">
          发表评价
          <text class="i ico"></text>
        </view>
      </view>
      <view class="bbs">
        <block v-if="BBS.length > 0">
          <view v-for="(item, index) in BBS" :key="index" class="dl">
            <view class="dt">
              <image :src="item.photo_s" mode="aspectFill"></image>
            </view>

            <view class="dd">
              <view class="nickname">
                {{ item.nickname }}　
                <text class="font">{{ item.addtime }}</text>
                <view class="lou">
                  <text class="span">{{ item.i }}</text>
                  楼
                </view>
              </view>
              <view class="C">
                <text :class="'pjkind k' + item.pjkind">{{ item.pjkind_t }}</text>
                <block v-if="item.flag == 1">{{ item.content }}</block>
                <text v-else class="font">该评价已被冻结或删除！</text>
                <view v-if="!globalUtils.empty(item.content2)" class="hnhf">{{ item.content2 }}</view>
              </view>
            </view>
          </view>
        </block>
        <view v-else class="nodata">
          <image mode="aspectFit" src="/static/res/img/nodata.png"></image>
          暂无评价
          <view class="btn3" @tap="bbs_addFn">我要评价</view>
        </view>
      </view>
    </view>
    <view v-if="div_bbs" class="mask2 alpha0_100">
      <view class="div_box big_normal div_bbs" style="--div_box_width: 82%; --div_box_height: 580rpx">
        <view class="close ico" @tap="kefu_closeFn"></view>
        <view class="div_title">发表服务评价</view>
        <form @submit="div_bbs_submitFn">
          <textarea class="textarea" name="content" placeholder="请如实对此经纪人的评价~~"></textarea>
          <radio-group name="kind">
            服务打分：
            <label class="sex1">
              <radio :checked="true" color="#95C057" value="1"></radio>
              好评
            </label>
            　
            <label class="sex2">
              <radio color="#e3b26b" value="2"></radio>
              中评
            </label>
            　
            <label class="sex2">
              <radio color="#999999" value="3"></radio>
              差评
            </label>
          </radio-group>
          <button :style="'--color:' + color + ';--rgbcolor:' + rgbcolor + ';'" class="btn4 ico" formType="submit">
            提交评价
          </button>
        </form>
      </view>
    </view>
    <view id="anlibox" :style="'--color:' + color + ';--rgbcolor:' + rgbcolor + ';'" class="hn_i_box">
      <view class="h1">
        服务案例
        <text class="b"></text>
      </view>
      <view class="anli">
        <block v-if="ANLI.length > 0">
          <view v-for="(item, index) in ANLI" :key="index" class="li">
            <view class="a">
              <image :src="item.photo_s" mode="aspectFill"></image>
              <view class="h5">{{ item.nickname }} {{ item.age }}</view>
            </view>
          </view>
        </block>
        <view v-else class="nodata">
          <image mode="aspectFit" src="/static/res/img/nodata.png"></image>
          暂时还木有人找{{ D.sex_str }}服务
          <view class="btn3" @tap="join_addFn">找{{ D.sex_str }}牵线</view>
        </view>
      </view>
    </view>
    <view :style="'--color:' + color + ';--rgbcolor:' + rgbcolor + ';'" class="hn_i_btm">
      <view class="a" @tap="bbsshowFn">
        <text class="i ico"></text>
        <text class="span">经纪人评价</text>
      </view>
      <view class="a" @tap="anliFn">
        <text class="i ico"></text>
        <text class="span">服务案例</text>
      </view>
      <view :class="'a ' + (D.btnF == 1 ? ' doing' : '')" @tap="join_addFn">
        <text class="span ico">{{ D.btnF == 1 ? ' ' : ' ' }}{{ D.btnT }}</text>
      </view>
    </view>
    <!-- parse <include src="../login.wxml"></include> -->
    <block>
      <view v-if="div_login" class="mask3 alpha0_100">
        <view
            class="div_box big_normal"
            style="--div_box_width: 82%; --div_box_height: 666rpx; background: -webkit-linear-gradient(top, #fde9ee 1%, #fff 150%); background-color: #fff"
        >
          <view :style="'border-color:rgba(' + rgbcolor + ',.2);'" class="m">
            <image mode="aspectFit" src="/static/res/img/photo_m.png"></image>
          </view>
          <view class="S22 B">登录后获得更精准推荐</view>
          <view class="loginagree">
            <checkbox-group @change="ifagreeFn">
              <label style="margin-left: -10rpx">
                <checkbox :style="'--color:' + color + ';'" value="1"></checkbox>
                <text class="C666 vmiddle">阅读并同意</text>
              </label>
            </checkbox-group>
            <navigator :style="'color:' + color" class="vmiddle" hoverClass="none"
                       url="/pagesA/about/law?kind=agreement">用户协议
            </navigator>
            <text class="C666 vmiddle">与</text>
            <navigator :style="'color:' + color + ';'" class="vmiddle" hoverClass="none"
                       url="/pagesA/about/law?kind=declara">隐私条款
            </navigator>
          </view>
          <button
              v-if="ifagree"
              :style="'--color:' + color + ';--rgbcolor:' + rgbcolor + ';width:73%'"
              class="btn5 W90_"
              openType="getPhoneNumber"
              @getphonenumber="getPhoneNumber"
          >
            <text>手机号快捷登录</text>
            <text :style="'color: ' + color + ';'">私密</text>
          </button>
          <button v-else :style="'--color:' + color + ';--rgbcolor:' + rgbcolor + ';width:73%'"
                  class="btn5" @tap="ifagree_passFn">
            <text>手机号快捷登录</text>
            <text :style="'color: ' + color + ';'">私密</text>
          </button>
          <view class="C666" @tap="back">
            <text style="border-bottom: #999 1px solid">暂不登录</text>
          </view>
        </view>
      </view>
    </block>
    <view class="blank"></view>
  </view>
</template>
<script>
import globalUtils from "../../res/www.a9a.cn";

var o;
var t = require('../../res/www.a9a.cn.js');
var app = getApp();
export default {
  computed: {
    globalUtils() {
      return globalUtils
    }
  },
  data() {
    return {
      mask_class: 'alpha0_100',
      bg: app.globalData.WWW + '/res/m/img/my_bg.png',
      id: '',
      color: '',
      rgbcolor: '',

      D: {
        path_s: '',
        truename: '',
        agenttitle: '',
        title: '',
        click: '',
        pj_good: '',
        pj_normal: '',
        pj_bad: '',
        mob: '',
        weixin: '',
        ewm: '',
        sex_str: '',
        btnF: 0,
        btnT: ''
      },

      aboutus: '',
      BBS: '',
      ANLI: '',
      div_bbs: false,
      div_login: false,
      ifagree: false
    };
  },
  onLoad: function (o) {
    var that = this;
    var a = this;
    var e = o.id;
    a.setData({
      id: e
    });
    app.globalData.get_config('_ZEAI').then(function (o) {
      a.setData({
        color: app.globalData._ZEAI.color,
        rgbcolor: t.c16_rgb(app.globalData._ZEAI.color)
      });
      uni.setNavigationBarColor({
        backgroundColor: app.globalData._ZEAI.color,
        frontColor: '#ffffff'
      });
      // uni.setBackgroundColor({
      //     backgroundColorTop: app.globalData._ZEAI.color
      // });
    });
    app.globalData.get_openid().then(function (o) {
      that.init();
    });
  },
  onPullDownRefresh: function () {
    var that = this;
    uni.vibrateShort({
      type: 'heavy'
    });
    setTimeout(function () {
      uni.stopPullDownRefresh();
      that.init();
    }, 500);
  },
  onShareAppMessage: function () {
    return {
      imageUrl: this.D.path_s,
      title: this.D.truename,
      path: '/hnPages/hn_detail/hn_detail?id=' + this.id
    };
  },
  onShareTimeline: function () {
    return {
      imageUrl: this.D.path_s,
      title: this.D.truename,
      query: 'id=' + this.id,
      path: '/hnPages/hn_detail/hn_detail'
    };
  },
  methods: {
    init: function () {
      var that = this;
      uni.showLoading({
        title: '拼命加载中...',
        mask: true
      });
      uni.showNavigationBarLoading();
      o = uni.getStorageSync('COOK_U');
      app.globalData.ajax({
        url: 'hn.php',
        data: {
          submitok: 'hn_detail_new',
          openid: o.openid,
          id: that.id
        },
        success: function (o) {
          if (1 == o.flag) {
            that.setData({
              D: o.D,
              aboutus: t.escape2Html(o.D.aboutus),
              BBS: o.BBS,
              ANLI: o.ANLI
            });
            uni.setNavigationBarTitle({
              title: o.D.nTitle
            });
            uni.setBackgroundColor({
              backgroundColorTop: that.color
            });
          } else {
            uni.showToast({
              title: o.msg,
              icon: 'none',
              mask: true
            });
          }
          uni.hideLoading();
          uni.hideNavigationBarLoading();
        }
      });
    },

    telFn: function (o) {
      uni.makePhoneCall({
        phoneNumber: this.D.mob
      });
    },

    bbs_addFn: function () {
      var that = this;
      app.globalData.chklogin().then(function (t) {
        if (t) {
          that.setData({
            div_bbs: true
          });
        } else {
          uni.redirectTo({
            url: '/pages/login/login'
          });
        }
      });
    },

    bbsshowFn: function () {
      t.o('#bbsbox', function (o) {
        uni.pageScrollTo({
          scrollTop: o[0].top - 20,
          duration: 300
        });
      });
    },

    div_bbs_submitFn: function (i) {
      var that = this;
      var e = i.detail.value;
      app.globalData.empty(e.content)
          ? uni.showToast({
            title: '请输入评价内容',
            icon: 'none',
            mask: true
          })
          : uni.showModal({
            title: '',
            content: '确定提交么？\r\n以下情形话题将被删除或封号：\r\n《请勿留下任何形式联系方法》\r\n《请勿发表涉黄涉政言论》\r\n《不得辱骂或攻击他人》',
            confirmColor: that.color,
            cancelText: '取消',
            confirmText: '确定',
            success: function (i) {
              if (i.confirm) {
                uni.showLoading({
                  title: '正在保存',
                  mask: true
                });
                app.globalData.ajax({
                  url: 'hn.php',
                  data: {
                    submitok: 'bbs_add',
                    openid: o.openid,
                    id: that.id,
                    content: e.content,
                    kind: e.kind
                  },
                  success: function (o) {
                    console.log('是否发布成功',o)
                    uni.hideLoading();
                    1 == o.flag
                        ? uni.showModal({
                          content: o.msg,
                          confirmColor: that.color,
                          confirmText: '朕知道了',
                          showCancel: false,
                          success: function (o) {
                            that.setData({
                              div_bbs: false
                            });
                            that.init();
                          }
                        })
                        : ((o.this = that), (o.url = 'no'), t.sorry(o));
                  }
                });
              }
            }
          });
    },

    join_addFn: function () {
      var that = this;
      app.globalData.chklogin().then(function (a) {
        a
            ? uni.showModal({
              title: '',
              content: '确定【' + that.D.truename + '】为您服务么？\r\n选定后将不能更换',
              confirmColor: that.color,
              cancelText: '取消',
              confirmText: '确定',
              success: function (a) {
                if (a.confirm) {
                  uni.showLoading({
                    title: '正在发送申请',
                    mask: true
                  });
                  app.globalData.ajax({
                    url: 'hn.php',
                    data: {
                      submitok: 'join_add',
                      openid: o.openid,
                      id: that.id
                    },
                    success: function (o) {
                      uni.hideLoading();
                      1 == o.flag
                          ? uni.showModal({
                            content: o.msg,
                            confirmColor: that.color,
                            confirmText: '朕知道了',
                            showCancel: false,
                            success: function (o) {
                              that.init();
                            }
                          })
                          : ((o.this = that), (o.url = 'no'), t.sorry(o));
                    }
                  });
                }
              }
            })
            : uni.redirectTo({
              url: '/pages/login/login'
            });
      });
    },

    getPhoneNumber: function (o) {
      app.globalData.getPhoneNumber({
        e: o,
        url: '/pagesA/reg/reg'
      });
    },

    back: function () {
      this.setData({
        div_login: false
      });
    },

    kefu_closeFn: function () {
      this.setData({
        div_bbs: false
      });
    },

    anliFn: function () {
      t.o('#anlibox', function (o) {
        uni.pageScrollTo({
          scrollTop: o[0].top - 20,
          duration: 300
        });
      });
    },

    ifagreeFn: function (o) {
      1 == o.detail.value
          ? this.setData({
            ifagree: true
          })
          : this.setData({
            ifagree: false
          });
    },

    ifagree_passFn: function () {
      uni.showToast({
        title: '请先点击同意《用户协议》和《隐私条款》',
        icon: 'none',
        mask: true,
        duration: 3000
      });
    }
  }
};
</script>
<style>
@import 'hn_detail.css';
</style>
